//导入ol开发资源
import Map from "ol/Map";
import View from "ol/View";
import OSM from "ol/source/OSM";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import TileArcGISRest from "ol/source/TileArcGISRest";
import { Cluster as ClusterSource, Vector as VectorSource } from "ol/source";


/**
 * 仅提供一个ol.View实例-保持多个View视图同步
 */
const viewDefault = new View({
    projection: "EPSG:4326", //使用这个坐标系
    // center: transform(_center, 'EPSG:4326', 'EPSG:3857'), //深圳
    minZoom: 0,
    maxZoom: 28,
});

export default class MapClass {
    /**
     * 构造器
     * @param {*} _targetId
     * @param {*} _center
     * @param {*} _projection
     * @param {*} _zoom
     */
    constructor(
        _targetId = "map",
        _center = [12618191.188117, 2648719.790709],
        _projection = "EPSG:4326",
        _zoom = 10.5
    ) {
        this.views = new Array(); //视图容器
        this.layers = new Array(); //图层容器
        this.overlays = new Array(); //overlay容器
        this.popup = undefined; //弹出窗实例
        //配置View属性
        viewDefault.setCenter(_center);
        // viewDefault.setZoom(_zoom);
        this.views.push(viewDefault);

        //地图实例
        this.map = new Map({
            view: viewDefault,
            layers: [],
            target: _targetId,
            // overlays: [this.initPopupWindow()],
        });
    }

    /**
     * 获取当前MapClass工具的ol.map对象
     * @returns ol.map对象
     */
    getOlMap() {
        return this.map;
    }

    // //获取弹出窗口
    // initPopupWindow() {
    //     //创建弹出窗口
    //     this.popup = createPopUpWindowForMap();
    //     let overlayPopup = new Overlay({
    //         element: this.popup,
    //         autoPan: {
    //             animation: {
    //                 duration: 250,
    //             },
    //         },
    //     });
    //     //绑定关闭按钮事件
    //     let closeBtn = this.popup.querySelector("#popup-closer");
    //     console.log(closeBtn);
    //     closeBtn.addEventListener("click", function() {
    //         overlayPopup.setPosition(undefined); //关闭内容面板
    //     });
    //     this.overlays.push(overlayPopup);
    //     // this.map.addOverlay(overlayPopup);
    //     return overlayPopup;
    // }

    // //获取弹出窗口图层
    // setDefaultOverLay(_position, _content = "") {
    //     let defeaultOverLay = this.overlays[0];
    //     if (defeaultOverLay) {
    //         let content = this.popup.querySelector("#popupContent");
    //         content.innerHTML = _content;
    //         //设置位置
    //         defeaultOverLay.setPosition(_position);
    //     }
    // }

    /**
     * 获取View视图对象
     * @returns ol.View实例
     */
    getDefaultMapView() {
        return viewDefault;
    }

    //添加瓦片图层
    addArcGISTileLayer(
        _url,
        _zIndex,
        _properties = { layerName: undefined, desc: undefined }
    ) {
        let tileLayer = new TileLayer({
            properties: _properties,
            zIndex: _zIndex ? _zIndex : 0,
            visible: true,
            source: new TileArcGISRest({
                url: _url,
            }),
        });
        this.layers.push(tileLayer);
        this.map.addLayer(tileLayer);
        return tileLayer;
    }

    /**
     * 添加Open Street Map底图
     * 经度范围为:73°33′E-135°05′E,纬度范围为:3°51′N-53°33′N。
     * @param {*} _zinde
     * @param {*} _extent 限定图层显示边界
     * @param {*} _minZoom
     * @param {*} _maxZoom
     * @param {*} _properties
     * @returns
     */
    addOSMTileLayer(
        _zinde = undefined,
        _extent = undefined,
        _minZoom = undefined,
        _maxZoom = undefined,
        _properties = { layerName: undefined, desc: undefined }
    ) {
        let tileLayer = new TileLayer({
            properties: _properties,
            extent: _extent,
            minZoom: _minZoom,
            maxZoom: _maxZoom,
            zIndex: _zinde,
            visible: true,
            source: new OSM(),
        });
        this.layers.push(tileLayer);
        this.map.addLayer(tileLayer);
        return tileLayer;
    }

    /**
     * 添加聚合图层
     * @param {*} _zIndex
     * @param {*} _styleFunction
     * @param {*} _properties
     * @returns
     */
    addClusterVectorLayer(
        _zIndex,
        _styleFunction,
        _properties = { layerName: undefined, desc: undefined }
    ) {
        let clusterVectorLayer = new VectorLayer({
            zIndex: _zIndex,
            properties: _properties,
            source: new ClusterSource({
                distance: 50,
                minDistance: 25,
                source: new VectorSource(),
            }),
        });
        this.layers.push(clusterVectorLayer);
        this.map.addLayer(clusterVectorLayer);
        return clusterVectorLayer;
    }

    /**
     * 添加Vetor矢量图层图层
     * @param {*} _layerName
     * @param {*} _zIndex
     */
    addVectorLayer(_zIndex, _styleFunction, _properties = {}) {
        let vectorLayer = new VectorLayer({
            properties: _properties,
            zIndex: _zIndex ? _zIndex : 0,
            visible: true,
            source: new VectorSource(),
            style: _styleFunction,
        });
        this.layers.push(vectorLayer);
        this.map.addLayer(vectorLayer);
        return vectorLayer;
    }

    /**
     * 添加OverLay图层
     * @param {*} _styleFunction
     * @param {*} _properties
     */
    addOverlayLayer(_styleFunction, _properties = {}) {
        let overlayLayer = new VectorLayer({
            properties: _properties,
            visible: true,
            source: new VectorSource(),
            style: _styleFunction,
            map: this.map,
        });
        this.layers.push(overlayLayer);
        // this.map.addLayer(overlayLayer)
        return overlayLayer;
    }

    /**
     * 判断图层是否存在
     * @param {*} _layerName
     */
    hasLayer(_layerName) {
        return !!this.getLayerByName(_layerName) ? true : false;
    }

    /**
     * 根据图层名称获取图层
     * @param {*} _layerName
     */
    getLayerByName(_layerName) {
        let layer = [];
        if (_layerName) {
            //遍历图层
            layer = this.layers.filter((item) => {
                return item.values_["layerName"] === _layerName;
            });
        }
        return layer.length > 0 ? layer[0] : undefined;
    }

    /**
     * 清空Vector矢量图层中的feature要素
     * @param {*} _layer
     */
    clearFeaturesByLayerName(_layerName) {
        if (this.hasLayer(_layer)) {
            let layer = this.getLayerByName(_layerName);
            this.clearFeatures(layer);
        }
    }

    /**
     * 直接清空layer中的features
     * @param {*} _layer
     */
    clearFeatures(_layer) {
        if (_layer) {
            _layer.getSource().clear();
        }
    }

    /**
     * 更新矢量图层中的features
     * @param {*} _layer
     * @param {*} _features
     * @param {*} _zoomToExtent
     */
    updateFeaturesByLayerName(
        _layerName,
        _features,
        _isClear = true,
        _zoomToExtent = true
    ) {
        if (this.hasLayer(_layerName)) {
            let layer = this.getLayerByName(_layerName);
            console.log(layer.getSource());
            //判断是否刷清空图层features
            _isClear ? layer.getSource().clear() : "";
            //更新features
            layer.getSource().addFeatures(_features);
            //判断是否缩放到图层范围
            _zoomToExtent ? this.zoomToExtent(layer) : "";
        }
    }

    /**
     * 缩放到图层范围
     * @param {*} _layer
     */
    zoomToExtent(_layer) {
        if (_layer) {
            let extent = _layer.getSource().getExtent();
            console.log(extent);
            this.map.getView().fit(extent);
        }
    }

    /**********************事件监听操作******************* */

    /**
     * 为目标图层-注册事件监听动作
     * @param {*} _layerName
     * @param {*} _eventType
     * @returns
     */
    addEventListenerForLayer(_layerName, _eventType, _callBack) {
        if (this.hasLayer(_layerName) == false) return false;
        //获取目标图层
        let _that = this;
        let layer = this.getLayerByName(_layerName);
        //注册事件
        this.registEventForMap(_eventType, function(event) {
            //获取当前像素点位置
            let pixel = _that.map.getEventPixel(event.originalEvent);
            //获取要素
            layer.getFeatures(pixel).then(function(features) {
                let feature = features.length ? features[0] : undefined;
                //对feature执行操作
                _callBack(feature, event);
            });
        });
    }

    /**
     * 注册地图监听事件
     * @param {*} _eventType
     * @param {*} _callback
     */
    registEventForMap(_eventType, _callback) {
        this.map.on(_eventType, function(event) {
            _callback(event);
        });
    }
}